<template>
  <!-- 用户导入对话框 -->
  <el-dialog
    title="同步企微用户"
    v-model="visible"
    append-to-body
    width="600px"
    v-if="visible"
  >
    <el-alert type="success">
      提示：点击开始同步后将同步企业微信的账号以及部门到系统内部，用户包含姓名-账号-部门等。用户默认账号为企微账号，密码，岗位为默认设置。如果用户存在多个部门会同步主部门。如果已经同步过,再次同步会更新。
    </el-alert>
    <div class="mt10">
      回调地址：在企微信息发生变更时通知
      <div>
        {{ getApiBaseUrl() + "/wx/cp/portal/你的agentId" }}
      </div>
    </div>
    <el-button
      class="mt10 mb10"
      size="default"
      icon="ele-Link"
      @click="handleSyncWechatCp"
    >
      开始同步
    </el-button>

    <handle-process
      class="mt10"
      tips="同步企微信息中"
      :request-key="syncId"
      v-if="syncId"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">{{ $t("formI18n.all.cancel") }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { syncWechatCpRequest } from "@/api/system/organization";
import HandleProcess from "@/components/HandleProcess/index.vue";
import { baseUrl, getApiBaseUrl, getBaseUrlPath } from "../../../utils/auth";

const visible = ref(false);

const show = () => {
  visible.value = true;
};

const syncId = ref(null);

const handleSyncWechatCp = () => {
  syncWechatCpRequest().then(res => {
    syncId.value = res.data;
  });
};

defineExpose({ show });
</script>

<style scoped lang="scss">
.danger-tips {
  color: var(--el-color-danger);
  font-size: 14px;
}
</style>
